<!-- 回复评论 -->
<template>
  <div class="comment-reply">
      <van-nav-bar class="reply-count">
          <template #title>{{replyCommentCount}}</template>
      </van-nav-bar>
      <div class="scroll-wrap">
      <comment-item :article='currentComment'></comment-item>
      <van-cell title="全部回复"/>
      <comment-list :articleId='currentComment.com_id.toString()'
                    type="c" :list='commentReplyList'
                    @update-comment-list='commentReplyList.push(...$event)'
      ></comment-list>
      </div>
      <div class="button-wrap">
        <van-button class="reply-comment-btn" @click="popupShow=true">写评论</van-button>
      </div>
      <!-- 发布评论弹出层 -->
      <van-popup
      class="bottom-popup"
      v-model:show="popupShow"
      close-on-popstate
      closeable
      round
      position="bottom"
      >
      <comment-post :art_id='articleId'
                    :articleId='currentComment.com_id.toString()'
                    @postSuccess='onPostSuccess'
      ></comment-post>
      </van-popup>
      <!-- 发布评论弹出层 -->
  </div>
</template>

<script>
import CommentItem from '@/components/commentItem'
import CommentList from '@/components/commentList'
import CommentPost from '@/components/commentPost'
export default {
  name: 'CommentReply',
  components: {
    CommentItem,
    CommentList,
    CommentPost
  },
  props: {
    currentComment: {
      type: Object,
      required: true
    },
    articleId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data () {
    return {
      commentReplyList: [], // 回复评论列表
      popupShow: false // 控制弹出层是否出现
    }
  },
  computed: {
    replyCommentCount () {
      if (this.currentComment.reply_count) {
        return this.currentComment.reply_count + '条回复'
      } else {
        return '暂无回复'
      }
    }
  },
  methods: {
    onPostSuccess (val) {
      // 关闭弹出层
      this.popupShow = false
      // 回复总数加一
      this.commentReplyList.reply_count++
      // 将评论置顶
      this.commentReplyList.unshift(val)
    }
  }
}
</script>

<style  scoped lang='less'>
.comment-reply {
  .button-wrap {
   position: fixed;
   right: 0;
   left: 0;
   bottom: 0;
   border-top: 1px solid #d8d8d8;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #fff;
   .reply-comment-btn {
     width: 80%;
     border-radius: 50px;
     margin: 5px 0;
   }
  }
  /deep/.scroll-wrap {
    .van-list__finished-text {
      margin: 80px auto 20px;
    }
    position: fixed;
    right: 0;
    left: 0;
    bottom: 100px;
    overflow-y: auto;
    height: 76vh
  }
  .reply-count {
    margin-bottom: 5px;
  }

}

</style>
